<template>
  <el-dialog
    :close-on-click-modal="false"
    width="85%"
    :title="title"
    :visible.sync="visible"
    :before-close="close"
    lock-scroll
    append-to-body
  >
    <el-form status-icon ref="addEdit">
      <el-row :gutter="10">
        <el-col :span="24">
          <el-table
            v-loading="loading"
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
            :data="tableData"
            border
            max-height="380"
            size="mini"
            style="width: 100%"
          >
            <el-table-column
              v-for="column in columns"
              :key="column.props"
              :prop="column.props"
              :label="column.label"
              :width="column.width ? column.width : ''"
            >
              <template slot-scope="scope">
                <div v-if="column.isTemplate">
                  <div v-if="column.quarterLevel">
                    <span v-if="scope.row[column.props]">{{
                      scope.row[column.props] +
                      "（" +
                      scope.row[column.levelScope] +
                      "）/ " +
                      scope.row[column.ownScore]
                    }}</span>
                    <span v-else>--</span>
                  </div>
                  <div v-if="column.quarterScore">
                    {{
                      scope.row[column.props] ? scope.row[column.props] : "--"
                    }}
                  </div>
                </div>
                <div v-else>{{ scope.row[column.props] }}</div>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { Message } from "element-ui";
import staNewAPI from "@apis/statisticsNew";

export default {
  name: "addEdit",
  props: {
    visible: Boolean,
    title: String,
    datas: {
      type: Object,
    },
  },
  data() {
    return {
      loading: false,
      loadingBtn: false,
      tableData: [],
      columns: [
        {
          props: "name",
          label: "姓名",
          width: "75",
          isTemplate: false,
          quarterLevel: false,
          quarterScore: false,
        },
        {
          props: "quarterOneLevel",
          levelScope: "quarterOneScope",
          ownScore: "quarterOneScore",
          label: "一季度 等级（参考范围）/ 得分",
          isTemplate: true,
          quarterLevel: true,
          quarterScore: false,
        },
        {
          props: "quarterTwoLevel",
          levelScope: "quarterTwoScope",
          ownScore: "quarterTwoScore",
          label: "二季度 等级（参考范围）/ 得分",
          isTemplate: true,
          quarterLevel: true,
          quarterScore: false,
        },
        {
          props: "quarterThreeLevel",
          levelScope: "quarterThreeScope",
          ownScore: "quarterThreeScore",
          label: "三季度 等级（参考范围）/ 得分",
          isTemplate: true,
          quarterLevel: true,
          quarterScore: false,
        },
        {
          props: "quarterFourLevel",
          levelScope: "quarterFourScope",
          ownScore: "quarterFourScore",
          label: "四季度 等级（参考范围）/ 得分",
          isTemplate: true,
          quarterLevel: true,
          quarterScore: false,
        },
      ],
    };
  },
  computed: {},
  components: {},
  created() {
    this.loading = true;
    this.getList();
  },
  methods: {
    //获取table数据
    getList() {
      staNewAPI
        .getStatisticQuarterPerson({
          year: this.datas.year,
          uid: this.datas.uid,
        })
        .then((res) => {
          this.tableData = [{ ...res }];
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(err.message);
        });
    },
    close() {
      this.loadingBtn = false;
      this.$emit("update:visible", false);
    },
    save() {
      this.loadingBtn = true;
      this.$emit("saveForm");
    },
  },
};
</script>
<style lang="scss" scoped>
</style>